import React, { Component } from 'react'
import Left from './components/Left'
import Title from './components/Title'
import Main from './components/Main'

import axios from './utils/axios'

export class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       list:[], //全部数据
       activeId:"", //高亮的id
    }
  }

  // 请求数据 
  componentDidMount() {
    axios.get("/list").then( res => {
      res.data[0].flag = true; //默认让第一个限制在右侧头上
      this.setState({ //重新赋值
        list: res.data,
        activeId: res.data[0].id, // 根据【id】高亮， 默认让左侧第一项高亮
      })
    })
  }

  // 1）点击左侧列表【高亮】，切换id，让当前项flag改为true【为true的项展示在右侧的头部】 
  changeLeft(id) {
    let { list, activeId } = this.state;
    list.forEach( item => {
      if( item.id === id) {
        item.flag = true; //设置为true --- 用于右侧渲染内容的数据
        activeId = item.id; //把当前点击的id赋给activeId【存点击了的id】
      }
    })
    // 重新赋值 
    this.setState({
      list: list,
      activeId: activeId
      
    })
  }

  // 2）右侧标题点击【id】---左侧内容和高亮切换，右侧高亮切换 
  changeTitle(id) {
    let { list, activeId } = this.state;
    list.forEach( item => {
      if( item.id === id) {
        activeId = item.id; 
      }
    })
    // 重新赋值  
    this.setState({
      activeId: activeId
    })
  }

  // 3）点击头部X，删除内容 
  delFn(id) {
    let { list } = this.state;
    list.forEach( item => {
      if( item.id === id) {
        item.flag = false; //让开关变为false
      }
    })

    // 重新赋值数据
    this.setState({
      list: list
    })
  }

  render() {
    const { list, activeId } = this.state;
    return (
      <div className='App'>
        {/* 1.左侧导航列表  */}
        <Left 
        list={ list } 
        activeId={activeId} //高亮id
        changeLeft={this.changeLeft.bind(this)} //左侧内容点击，右侧内容出现
        
        >

        {/* ❤ 插槽：直接在组件内使用
            在组件标签内传递参数，从结构上看，h2是list的children,
            所以left里面就使用this.props.children
         */}
        <h2>
          <span>我是span</span>
          {/* 注：文本是h2的 props.children */}
        </h2>
        <h3>
          我是h3
        </h3>

        </Left>
        <div className='right'>
          {/* 2.右侧头部内容  */}
          <Title
          list={ list } //列表数据 
          activeId = { activeId }  //高亮id
          changeTitle ={ this.changeTitle.bind(this)} //点击右侧头部内容，左侧对应内容和高亮切换
          delFn = { this.delFn.bind(this)}  //点击右侧头部内容删除
          ></Title>
          {/* 3.右侧身体内容  */}
          <Main
          list = { list }
          activeId = { activeId }
          ></Main>
        </div>
      </div>
    )
  }
}

export default App
